09. Style your map

L4 A08 Style Your Map

Reference Documentation

You can customize Google Maps in many ways, giving your map a unique look and feel.

You can customize a MapFragment object using the available XML attributes, as you would customize any other fragment. However, in this step you customize the look and feel of the content of the MapFragment, using methods on the GoogleMap object.

Create a style for your map

To create a customized style for your map, you generate a JSON file that specifies how features in the map are displayed. You don't have to create this JSON file manually: Google provides the Styling Wizard, which generates the JSON for you after you visually style your map. In this lesson, you style the map for "retro," meaning that the map uses vintage colors and you will be adding colored roads.

Note: Styling only applies to maps that use the normal map type.

  1. Navigate to https://mapstyle.withgoogle.com/ in your browser.
  2. Select Create a Style.
  3. Select the Retro theme.

  1. Click More Options at the bottom of the menu.
  2. In the Feature type list, select Road > Fill. Change the color of the roads to any color you choose (such as pink).
  3. Click Finish. Copy the JSON code from the resulting pop-up window.

Add the style to your map

  1. In Android Studio, create a resource directory in the res directory and name it raw

  1. Create a file in res/raw called map_style.json.
  2. Paste the JSON code into the new resource file.
  3. Create a TAG class variable above the onCreate() method. This will be used for logging purposes.
private val TAG = MapsActivity::class.java.simpleName
  1. In MapsActivity.kt, create a setMapStyle() function that takes in a GoogleMap.
     
    To set the JSON style to the map, call setMapStyle() on the GoogleMap object.
    Pass in a MapStyleOptions object, which loads the JSON file. The setMapStyle() method returns a boolean indicating the success of the styling. 
private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )
   }
}
  1. If the styling is unsuccessful, print a log that the parsing has failed.
private fun setMapStyle(map: GoogleMap) {
   try {
       …
       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   }
}

  1. In the catch block if the file can't be loaded, the method throws a Resources.NotFoundException. 
private fun setMapStyle(map: GoogleMap) {
   try {
       …
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

The full method should look like this:

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )

       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}
  1. Call the setMapStyle() method in the onMapReady() method passing in your GoogleMap object.
override fun onMapReady(googleMap: GoogleMap) {
   ...
   setMapStyle(map)
}
  1. Run your app. The new styling should be visible with retro theming and roads of your chosen color when the map is in normal mode.

Note: If you zoom out enough, the map will not show roads anymore so you will not see them.

Next Concept